<script setup>
  import { ref, reactive, toRefs, watch, onMounted } from 'vue';
  import { ElMessage } from 'element-plus';
  import { addFeeRuleAPI, editRuleListAPI, showRuleListAPI } from '@/api/carRule';
  
  const props = defineProps({
    dialogVisible: Boolean
  });
  const emit = defineEmits(['dialogVisible', 'GetRuleList']);
  // 计费规则表单
  const addForm = reactive({
    ruleNumber: '', // 计费规则编号
    ruleName: '', // 计费规则名称
    chargeType: 'duration', // 计费规则类型 duration / turn / partition
    chargeCeiling: null,
    freeDuration: null,
    // 时长计费独有字段
    durationTime: null, // 时长计费单位时间
    durationPrice: null, // 时长计费单位价格
    durationType: 'hour',
    // 按次收费独有字段
    turnPrice: null,
    // 分段计费独有字段
    partitionFrameTime: null, // 段内时间
    partitionFramePrice: null, // 段内费用
    partitionIncreaseTime: null, // 超出时间
    partitionIncreasePrice: null // 超出费为收费价钱
  });
  // 添加计费规则 规则
  const addFormRules = reactive({
    ruleNumber: [
      { required: true, message: '请输入规则编号', trigger: 'blur' }
    ],
    ruleName: [
      { required: true, message: '请输入规则名称', trigger: 'blur' }
    ],
    chargeType: [
      { required: true, message: '请选择收费类型', trigger: 'blur' }
    ],
    durationTime: [
      { required: true, message: '请输入时间', trigger: 'blur' }
    ],
    durationPrice: [
      { required: true, message: '请输入金额', trigger: 'blur' }
    ],
    turnPrice: [
      { required: true, message: '请输入每次的价格', trigger: 'blur' }
    ],
    partitionFrameTime: [
      { required: true, message: '请输入段内时长', trigger: 'blur' }
    ],
    partitionFramePrice: [
      { required: true, message: '请输入段内费用', trigger: 'blur' }
    ],
    partitionIncreaseTime: [
      { required: true, message: '请输入超出时间', trigger: 'blur' }
    ],
    partitionIncreasePrice: [
      { required: true, message: '请输入超出金额', trigger: 'blur' }
    ]
  });
  // 编辑id
  const editId = ref(0);
  
  const groupChange = (val) => {
    console.log(val);
  };
  const closeDialog = () => {
    emit('dialogVisible', false);
    addForm.chargeCeiling = null;
    addForm.freeDuration = null;
    editId.value = 0;
  };
  
  const addConfirm = async () => {
    const valid = await addForm.$refs.addForm.validate();
    if (!valid) return;
    if (editId.value === 0) { // 添加新的计费规则
      await addFeeRuleAPI(addForm);
      ElMessage.success('添加成功!');
    } else { // 编辑计费规则
      await editRuleListAPI(addForm);
      ElMessage.success('编辑成功!');
    }
    emit('GetRuleList');
    closeDialog();
  }
  
const showRuleList = async (id) => {
    const res = await showRuleListAPI(id);
    console.log(res);
    
    Object.assign(addForm, res.data);
    editId.value = id;
  };
//   onMounted(()=> {
//     if(id) {
//         showRuleList(id)
//     }
//   })
</script>



<template>
    <!-- 弹框组件 -->
    <el-dialog
      :visible="dialogVisible"
      width="680px"
      :title="`${editId === 0 ? '添加计费规则' : '编辑计费规则'}`"
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <!-- 表单接口 -->
      <div class="form-container">
        <el-form ref="addForm" :model="addForm" :rules="addFormRules" label-position="top">
          <el-form-item label="计费规则编号" prop="ruleNumber">
            <el-input v-model="addForm.ruleNumber" />
          </el-form-item>
          <el-form-item label="计费规则名称" prop="ruleName">
            <el-input v-model="addForm.ruleName" />
          </el-form-item>
          <el-form-item label="计费方式" prop="chargeType">
            <el-radio-group v-model="addForm.chargeType" size="small" @change="groupChange">
              <el-radio label="duration" border>时长收费</el-radio>
              <el-radio label="turn" border>按次收费</el-radio>
              <el-radio label="partition" border>分段收费</el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="flex-container" style="display: flex; justify-content: space-between;">
            <el-form-item label="免费时长">
              <el-input v-model="addForm.freeDuration" style="width:150px" />
            </el-form-item>
            <el-form-item label="收费上限">
              <el-input v-model="addForm.chargeCeiling" style="width:150px" />
            </el-form-item>
          </div>
          <!-- 计费规则 -->
          <el-form-item label="计费规则" required>
            <!-- 时长计费区域 -->
            <div v-if="addForm.chargeType === 'duration'" class="duration" style="display: flex;">
              每
              <el-form-item prop="durationTime">
                <el-input v-model="addForm.durationTime" class="input-box" style="display: flex;" />
              </el-form-item>
              小时
              <el-form-item prop="durationPrice">
                <el-input v-model="addForm.durationPrice" class="input-box" style="width:150px" />
              </el-form-item>
              元
            </div>
            <!-- 按次收费区域 -->
            <div v-if="addForm.chargeType === 'turn'" class="turn" style="display:flex;">
              每次
              <el-form-item prop="turnPrice">
                <el-input v-model="addForm.turnPrice" class="input-box" style="width:150px" />
              </el-form-item>
              元
            </div>
            <!-- 分段计费区域 -->
            <div v-if="addForm.chargeType === 'partition'" class="partition">
              <div class="item" style="display: flex;">
                <el-form-item prop="partitionFrameTime">
                  <el-input v-model="addForm.partitionFrameTime" class="input-box" style="width:120px;" />
                </el-form-item>
                小时内，每小时收费
                <el-form-item prop="partitionFramePrice">
                  <el-input v-model="addForm.partitionFramePrice" class="input-box" style="width:120px;" />
                </el-form-item>
                元
              </div>
              <div class="item" style="display: flex; margin: 30px auto 0">
                <el-form-item prop="partitionIncreaseTime">
                  <el-input v-model="addForm.partitionIncreaseTime" class="input-box" style="width:120px;" />
                </el-form-item>
                小时超出后，增加
                <el-form-item prop="partitionIncreasePrice">
                  <el-input v-model="addForm.partitionIncreasePrice" class="input-box" style="width:120px;" />
                </el-form-item>
                元
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-button type="primary" @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="addConfirm">确 定</el-button>
      </template>
    </el-dialog>
  </template>
  

  
  <style scoped>

  </style>